<template>
	<view class="search-wrap">
		<u-search class="search-input" :disabled="false" placeholder="搜索医院/医生/疾病/知识" @input="search" :keyword="keyword"></u-search>
		<u-tabs v-if="tabShow" v-model="activeTab" :scroll="false" :tabs="['医院', '医生', '疾病', '知识']" @change="tabChange"></u-tabs>
		<view class="search-filter"><u-sl-filter v-if="menuList[0].show" :menuList="menuList" independence @result="ksFilter"></u-sl-filter></view>
		<scroll-view show-scrollbar="false" class="search-list " scroll-y @scrolltolower="scrollLoading()">
			
			<view class="search-hospital" v-if="activeTab == 0">
				<u-hospital-item v-for="(item, index) in dataList" :key="index" :data="item" @click="gotoRouter('/pages-hospital/hospitalInfo/hospitalInfo?hospitalId='+item.id)"></u-hospital-item>
				<u-empty-state v-if="dataTotalPage == 0" value="暂无相关医院信息"></u-empty-state>
			</view>
			<view class="search-doctor" v-if="activeTab == 1">
				<u-doctor-item
					v-for="(item, index) in dataList"
					:key="index"
					:data="item"
					@click="gotoRouter('/pages-hospital/doctorInfo/doctorInfo?id=' + item.id)"
				></u-doctor-item>
				<u-empty-state v-if="dataTotalPage == 0" value="暂无相关医生信息"></u-empty-state>
			</view>

			<view class="search-illness" v-if="activeTab == 2">
				<view class="search-illness-item" v-for="(item, index) in dataList" :key="index" @click="gotoRouter('/pages-hospital/illnessInfo/illnessInfo?id='+item.id)">
					{{ item.sicknessName }}
				</view>
				<u-empty-state v-if="dataTotalPage == 0" value="暂无相关疾病信息"></u-empty-state>
			</view>

			<view class="search-article" v-if="activeTab == 3">
				<u-article-item v-for="(item, index) in dataList" :key="index" :data="item"></u-article-item>
				<u-empty-state v-if="dataTotalPage == 0" value="暂无相关知识信息"></u-empty-state>
			</view>

			<uni-load-more v-if="dataTotalPage > 1" :status="dataLoading"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import uSearch from '@/components/u-search/u-search.vue';
import uTab from '@/components/u-tabs/u-tabs.vue';
import uArticleItem from '@/components/u-article-item/u-article-item.vue';
import uHospitalItem from '@/components/u-hospital-item/u-hospital-item.vue';
import uDoctorItem from '@/components/u-doctor-item/u-doctor-item.vue';
import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue';
import uEmptyState from '@/components/u-empty-state/u-empty-state.vue';
import uSlFilter from '@/components/u-sl-filter/u-sl-filter.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uSearch,
		uTab,
		uArticleItem,
		uHospitalItem,
		uDoctorItem,
		uniLoadMore,
		uEmptyState,
		uSlFilter
	},
	data() {
		return {
			keyword: '',
			pageNo: 1,
			pageSize: 20,
			dataTotalPage: 1, //数据总数
			dataLoading: 'loading', //数据加载
			dataList: [],
			sicknessDepartmentId: '',
			activeTab: 0,
			tabShow: true,
			menuList: [
				{
					show: false,
					title: '科室',
					key: 'ks',
					isSort: true,
					isMutiple: false,
					defaultSelectedIndex: 0,
					reflexTitle: true,
					detailList: []
				}
			]
		};
	},
	onLoad(option) {
		this.activeTab = option.activeTab ? parseInt(option.activeTab) : 0;
		this.tabShow = option.tabShow ? option.tabShow === 'true' : true;
		this.sicknessDepartmentId = option.sicknessDepartmentId ? parseInt(option.sicknessDepartmentId) : '';
		this.search();
		if (this.sicknessDepartmentId) {
			this.menuList[0].defaultSelectedIndex = this.sicknessDepartmentId-1
			this.queryKsList();
			
		}
	},
	onShow() {},
	computed: {
		...mapState({
			longitude: state => state.longitude,
			latitude: state => state.latitude
		})
	},
	methods: {
		ksFilter(e) {
			this.menuList[0].defaultSelectedIndex = e.ks-1
			this.sicknessDepartmentId = parseInt(e.ks);
			this.search();
		},

		tabChange(e) {
			this.activeTab = e;
			this.search();
		},

		//科室列表
		queryKsList() {
			this.$api.queryKsList({}).then(res => {
				if (res.code == 200) {
					const detailList = [];
					res.result.forEach(key => {
						detailList.push({ title: key.departmentName, value: key.id });
					});
					this.menuList[0].detailList = detailList;
					this.menuList[0].show = true;
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			});
		},

		search(e) {
			this.pageNo = 1;
			this.dataList = [];
			this.dataTotalPage = 1;
			if (e) {
				this.keyword = e.value;
			}

			this.scrollLoading();
		},

		//医生列表
		queryDoctorList() {
			this.$api
				.queryDoctorList({
					params: {
						doctorName: this.keyword,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						sicknessDepartmentId: this.sicknessDepartmentId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.dataTotalPage = res.result.pages;

						if (this.pageNo == 1) {
							this.dataList = res.result.records;
						} else {
							this.dataList = this.dataList.concat(res.result.records);
						}

						if (res.result.current >= res.result.pages) {
							this.dataLoading = 'noMore';
						} else {
							this.dataLoading = 'loading';
						}
						this.pageNo++;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//医院列表
		queryHospList() {
			this.$api
				.queryHospList({
					params: {
						hospName: this.keyword,
						latitude: this.latitude,
						longitude: this.longitude,
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.dataTotalPage = res.result.pages;

						if (this.pageNo == 1) {
							this.dataList = res.result.records;
						} else {
							this.dataList = this.dataList.concat(res.result.records);
						}

						if (res.result.current >= res.result.pages) {
							this.dataLoading = 'noMore';
						} else {
							this.dataLoading = 'loading';
						}
						this.pageNo++;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//文章列表
		queryArticleList() {
			this.$api
				.queryArticleList({
					params: {
						content: this.keyword,
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.dataTotalPage = res.result.pages;

						if (this.pageNo == 1) {
							this.dataList = res.result.records;
						} else {
							this.dataList = this.dataList.concat(res.result.records);
						}

						if (res.result.current >= res.result.pages) {
							this.dataLoading = 'noMore';
						} else {
							this.dataLoading = 'loading';
						}
						this.pageNo++;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//疾病分页
		querySicknessPage() {
			this.$api
				.querySicknessPage({
					params: {
						sicknessName: this.keyword,
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.dataTotalPage = res.result.pages;

						if (this.pageNo == 1) {
							this.dataList = res.result.records;
						} else {
							this.dataList = this.dataList.concat(res.result.records);
						}

						if (res.result.current >= res.result.pages) {
							this.dataLoading = 'noMore';
						} else {
							this.dataLoading = 'loading';
						}
						this.pageNo++;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//滚动加载
		scrollLoading() {
			if (this.pageNo <= this.dataTotalPage) {
				switch (this.activeTab) {
					case 0:
						this.queryHospList();
						break;
					case 1:
						this.queryDoctorList();
						break;
					case 2:
						this.querySicknessPage();
						break;
					case 3:
						this.queryArticleList();
						break;
					default:
						break;
				}
			}
		}
	}
};
</script>

<style lang="less">
@import './search.less';
</style>
